<template>
  <div class="echartsBox" ref="echartsBox"></div>
</template>

<script>
import fontSize from "@/modules/fontSize";
export default {
  mounted() {
    this.$nextTick(() => {
      /* 重新渲染图表 */
      this.drawLine();
    });
  },
   props: {
    //父组件传入的数据
    data: {
      type: Array | Object,
      default: () => ({ xData: [], yData1: [], yData2: [], yData3: [] }),
    },
    yMin: {
      type: Number | String,
      default: 0,
    },
  },
  data() {
    return {
      theme: this.json.theme, //主题颜色
    };
  },
  watch: {
    data: "drawLine", // 数值变化是更新图表
    yMin: "drawLine", // 数值变化是更新图表
  },
  methods: {
    //渲染echarts
    drawLine() {
      try {
        let myChart = this.$echarts.init(this.$refs.echartsBox);
        var yData1Num = 0;
        var yData2Num = 0;
        var yData3Num = 0;
        this.data.yData1.forEach(function (v, i) {
          yData1Num += v;
        });
        this.data.yData2.forEach(function (v, i) {
          yData2Num += v;
        });
        // this.data.yData3.forEach(function (v, i) {
        //   yData3Num += v;
        // });
        if (yData1Num == 0) {
          yData1Num = 1;
        }
        if (yData2Num == 0) {
          yData2Num = 1;
        }
        // if (yData3Num == 0) {
        //   yData3Num = 1;
        // }
        // let yNumArr = [yData1Num, yData2Num, yData3Num];
        // let yNum = yData3Num + yData1Num + yData2Num;
        let option = {
          // backgroundColor: "#080b30",
          title: {
            show: false,
            text: "多线图",
            textStyle: {
              align: "center",
              color: "#fff",
              fontSize: 20,
            },
            top: "5%",
            left: "center",
          },
          legend: {
            show: true,
            top: "center",
            right: "2%",
            // height: 15,
            orient: "vertical", //horizontal//横向//vertical//纵向
            // borderColor: "rgba(85, 150, 188,0.5)", //边框颜色
            // borderWidth: 1, //边框线宽
            // width: 50,
            // height: "10",
            // padding: [8,8,8,8], //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
            itemGap: 12,
            itemWidth: 6,
            itemHeight: 6,
            textStyle: {
              color: "#d4f0ff",
              fontSize: fontSize.fontSize(0.09),
              // padding: [0, 0, 0, 8],
            },
            data: ["内控", "实际"],
            icon: "circle", //circle, rect, roundRect, triangle, diamond, pin, arrow, none
            formatter: (val) => {
              var index = 0;
              var legendData = option.legend.data;
              legendData.forEach(function (v, i) {
                if (v == val) {
                  index = i;
                }
              });
              return val;
            },
          },
          tooltip: {
              textStyle: {
                fontSize: fontSize.fontSize(0.082),
              },
            position: [240, 20],
            show: true,
            trigger: "axis",
            axisPointer: {
              type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
              shadowStyle: {
                color: "rgba(123, 121, 78,0.1)",
                width: "0px",
              },
            },
            // formatter: (params, ticket, callback) => {
            //   console.log(params);
            //   var showHtm = "";
            //   // showHtm +=
            //   //   params[0].seriesName +
            //   //   ":" +
            //   //   Math.round(params[0].data * 100) +
            //   //   "%";
            //     showHtm +=
            //     params.seriesName +
            //     ":" +
            //     Math.round(params.data * 100) +
            //     "%";
            //   // // for (var i = 0; i < legendData.length; i++) {
            //   // //   let legend = "";
            //   // //   if (legendData[i] != "") {
            //   // //     legend = legendData[i] + " : ";
            //   // //   } else {
            //   // //     ("");
            //   // //   }
            //   // //   showHtm +=
            //   // //     "<br>" + legend + Math.round(params[i].data*100)+'%';
            //   // // }
            //   return showHtm;
            // },
            // axisPointer: {
            //   lineStyle: {
            //     color: {
            //       type: "linear",
            //       x: 0,
            //       y: 0,
            //       x2: 0,
            //       y2: 1,
            //       colorStops: [
            //         {
            //           offset: 0,
            //           color: "rgba(0, 255, 233,0)",
            //         },
            //         {
            //           offset: 0.5,
            //           color: "rgba(255, 255, 255,1)",
            //         },
            //         {
            //           offset: 1,
            //           color: "rgba(0, 255, 233,0)",
            //         },
            //       ],
            //       global: false,
            //     },
            //   },
            // },
          },
          grid: {
            top: "10%",
            left: "8%",
            right: "13%",
            bottom: "20%",
            // containLabel: true
          },
          xAxis: [
            {
              type: "category",
              axisLine: {
                show: false,
              },
              splitArea: {
                // show: true,
                color: "#f00",
                fontSize: fontSize.fontSize(0.09),
                lineStyle: {
                  color: "#f00",
                },
              },
              axisLabel: {
                show: true,
                // margin: 20,
                textStyle: {
                  color: "#d4f0ff",
                  fontSize: fontSize.fontSize(0.09),
                },
              },
              axisTick: { show: false },
              splitLine: {
                show: false,
              },
              boundaryGap: false,
              data: this.data.xData,
            },
          ],

          yAxis: [
            {
              type: "value",
              min: this.yMin,
              // max: 140,
              splitNumber: 4,
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255,255,255,0.1)",
                },
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                show: true,
                // margin: 20,
                textStyle: {
                  color: "#d4f0ff",
                  fontSize: fontSize.fontSize(0.09),
                },
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "内控",
              type: "line",
              smooth: true, //是否平滑
              showAllSymbol: true,
              // symbol: 'image://./static/images/guang-circle.png',
              symbol: "circle",
              symbolSize: 3,
              lineStyle: {
                normal: {
                  color: "rgba(230,48,168,1)",
                  shadowColor: "rgba(230,48,168,0)",
                  shadowBlur: 0,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                  width: 1,
                },
              },
              label: {
                show: false,
                position: "top",
                textStyle: {
                  color: "#00b3f4",
                },
              },
              itemStyle: {
                color: "rgba(230,48,168,1)",
                borderColor: "rgba(230,48,168,1)",
                borderWidth: 1,
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
              },
              // tooltip: {
              //   show: false,
              // },
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(230,48,168,0.3)",
                      },
                      {
                        offset: 1,
                        color: "rgba(230,48,168,0)",
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(230,48,168, 0.9)",
                  shadowBlur: 20,
                },
              },
              data: this.data.yData1,
            },
            {
              name: "实际",
              type: "line",
              smooth: true, //是否平滑
              showAllSymbol: true,
              // symbol: 'image://./static/images/guang-circle.png',
              symbol: "circle",
              symbolSize: 3,
              lineStyle: {
                normal: {
                  // show:false,
                  color: "rgba(4,251,242,1)",
                  shadowColor: "rgba(4,251,242,0)",
                  shadowBlur: 0,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                  width: 1,
                },
              },
              label: {
                show: false,
                position: "top",
                textStyle: {
                  color: "#00ca95",
                },
              },

              itemStyle: {
                color: "rgba(4,251,242,1)",
                borderColor: "rgba(4,251,242,1)",
                borderWidth: 1,
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
              },
              tooltip: {
                show: true,
              },
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(4,251,242,0.3)",
                      },
                      {
                        offset: 1,
                        color: "rgba(4,251,242,0)",
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(4,251,242, 0.9)",
                  shadowBlur: 20,
                },
              },
              data: this.data.yData2,
            },
          ],
        };
        myChart.setOption(option);
        myChart.off("click");
        /* 点击事件 */
        myChart.on("click", (params) => {});
        /* 大小自适应 */
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      } catch (err) {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 100%;
}
</style>
